<template>
    <el-row>
        <el-col :span="20">
            <div class="mv-container">
                <div class="mv-main">
                    <div class='wrapper infinite-list' style="height:1150px;" v-infinite-scroll="loadMv"
                        :infinite-scroll-disabled="this.busy" infinite-scroll-distance="500">
                        <div class='mv'>
                            <div class="item" :key="'' + item.id + index" v-for="(item, index) in mvList">
                                <router-link :to="{ path: '/mvlist/mv', query: { id: item.id }}" class="faceImg">
                                    <el-icon class="icon-video-play">
                                        <VideoPlay />
                                    </el-icon>
                                    <el-image :src="item.cover || item.imgurl">
                                        <div slot="placeholder" class="image-slot">
                                            <i class="iconfont icon-placeholder"></i>
                                        </div>
                                    </el-image>
                                </router-link>
                                <div class="info">
                                    <router-link :to="{ path: '/mvlist/mv', query: { id: item.id }}" class="mv-name">
                                        {{item.name}}</router-link>
                                    <router-link :to="{ path: '/singer', query: { id: item.artistId }}"
                                        class="mv-author" v-if="!item.publishTime">{{item.artistName}}</router-link>
                                    <div class="mv-playCount">
                                        <el-icon class="icon-mvlist">
                                            <VideoCameraFilled />
                                        </el-icon>
                                        {{$utils.formartNum(item.playCount)}}
                                    </div>
                                    <div class="mv-time" v-if="item.publishTime">发布时间：{{item.publishTime}}</div>
                                </div>
                            </div>
                        </div>
                        <div style="height: 100px; width: 97%;" v-loading="loading"></div>
                    </div>
                </div>
            </div>
        </el-col>
        <el-col :span="4">
            <div class="test_mv2">
                <div class="mv_type">
                    <div class="filter">
                        <h3 class="mv_h3">地区</h3>
                        <div class="mv_filter">
                            <template v-for="(item, index) in areaList" :key="index">
                                <div style="padding:5px;">
                                    <el-button icon="Search" round v-if="item.area_name === '全部'"
                                        @click="clickA(item.area_name)"></el-button>
                                    <el-button :plain="false" @click="clickA(item.area_name)" round v-else>
                                        {{item.area_name}}</el-button>
                                </div>
                            </template>
                        </div>
                        <el-divider />
                        <h3 class="mv_h3">类型</h3>
                        <div class="mv_filter">
                            <template v-for="(item, index) in typeList" :key="index">
                                <div style="padding:5px;">
                                    <el-button icon="Search" round v-if="item.type_name === '全部'"
                                        @click="clickB(item.type_name)">
                                    </el-button>
                                    <el-button round v-else @click="clickB(item.type_name)">{{item.type_name}}
                                    </el-button>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>

import { ElNotification, ElMessage } from 'element-plus'
import { mv } from '@apis/http'


export default {
    data() {
        return {
            areaList: [
                {
                    "area_name": "全部",
                },
                {
                    "area_name": "内地",
                },
                {
                    "area_name": "港台",
                },
                {
                    "area_name": "欧美",
                },
                {
                    "area_name": "日本",
                },
                {
                    "area_name": "韩国",
                }
            ],
            typeList: [
                {
                    "type_name": "全部",
                },
                {
                    "type_name": "官方版",
                },
                {
                    "type_name": "原声",
                },
                {
                    "type_name": "现场版",
                },
                {
                    "type_name": "网易出品",
                },
            ],
            mvList: [],
            limit: 30,
            offset: 0,
            busy: false,
            loading: true,
            //地区筛选
            type_a: '',
            //类型筛选
            type_b: '',
        };
    },
    methods: {
        clickA(value) {
            this.mvList = [];
            this.offset = 0;
            this.loading = false;
            this.type_a = value;
            console.log("地区=" + this.type_a);
            this.loadMv();
        },
        clickB(value) {
            this.mvList = [];
            this.offset = 0;
            this.loading = false;
            this.type_b = value;
            console.log("类型=" + this.type_b);
            this.loadMv();
        },
        loadMv() {
            mv({
                area: this.type_a,
                type: this.type_b,
                limit: this.limit,
                offset: this.offset
            }).then(res => {
                // console.log(JSON.stringify(res));
                if (res.code === 200) {
                    if (res.data.length > 0) {
                        for (let i = 0; i < res.data.length; i++) {
                            this.mvList.push(res.data[i]);
                        }
                        this.busy = !res.hasMore;
                        this.offset = this.mvList.length;
                    } else {
                        this.busy = true;
                    }
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看getNewMv()接口',
                    })
                }
            })
        },
    },
    created: function () {

    },
}
</script>

<style lang="less" scoped>
.mv {
    // height: 1150px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
    margin: 0 -10px;
    font-size: 0;

    .item {
        flex: 30%;
        max-width: calc(100% / 5 - 20px);
        margin: 20px 10px 0;
        border-radius: 4px;

        &:hover {
            .el-image {
                transform: scale(1.1);
            }

            .icon-video-play {
                opacity: 1;
                transform: scale(1);
            }
        }
    }

    .faceImg {
        display: block;
        position: relative;
        width: 100%;
        height: 123px;
        overflow: hidden;

    }

    .icon-video-play {
        margin: auto;
        position: absolute;
        top: 50%;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        margin-top: -30px;
        font-size: 60px;
        text-align: center;
        color: #fff;
        opacity: 0;
        transform: scale(.5);
        transition: all .4s linear;
        text-shadow: 2px 2px 10px #000;
    }

    .el-image {
        background-color: #f5f7fa;
        display: flex;
        height: 100%;
        width: 100%;
        justify-content: center;
        align-items: center;
        border-radius: 4px;
        transition: all .4s linear;

        :deep(img) {
            width: auto;
        }
    }

    .info {
        position: relative;
        padding: 15px 0;

        .mv-name {
            display: block;
            font-size: 14px;
            text-overflow: ellipsis;
            height: 20px;
            overflow: hidden;
            white-space: nowrap;
        }

        .mv-author,
        .mv-playCount,
        .mv-time {
            display: block;
            line-height: 24px;
            font-size: 14px;
            color: #999;
        }

        .icon-video {
            font-size: 24px;
            color: #999;
            vertical-align: top;
        }
    }
}

.mv-container {
    display: flex;
    padding-top: 40px;

    .mv-main {
        flex: 1;
        margin-top: -20px;
    }
}

.mv_h3 {
    margin-left: 8px;
    padding-bottom: 5px;
}

.test_mv1 {
    padding-top: 40px;
    border: 1px solid red;
}

.test_mv2 {
    /* border: 1px solid green; */
    padding-top: 40px;
    margin-left: 20px;
}

.mv_type {
    position: fixed;
    padding: 20px 20px 1px;
    margin-bottom: 25px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
}

.mv_filter {
    font-size: 0;
    padding-bottom: 20px;
    flex-wrap: wrap;
    display: flex;
}
</style>